<template>
  <div class="father">
    <My-sass class="one" ></My-sass>
    <h1>全局</h1>
    <!-- 加了scoped父组件的样式确实不会影响子组件，但是vue从布局出发，让子组件的根节点 同时受到父级和子级css影响，进而可以调整子组件的大小 -->
  </div>
</template>

<script>
import MySass from "../components/MySass.vue"
export default {
    components:{
        MySass
    }
}
</script>

<style scoped lang="scss">
// @import '../views/One.scss';
/* sass scss css的预处理语言 */
/* //less */
/* sass和scss 的书写方法不同 后缀名不同 我们常用scss */
/* 样式穿透 强制修改子组件的样式 */
/* 普通css >>> */
/* .father >>> .box{
    background-color: blue;
}
.one{
    width: 300px;
    height: 300px;
    background-color: green;
} */

// 可以定义变量
$myColor:"#ff0000";//警告按钮的颜色
$bigSize:"30px";
$smallSize:"12px";
// .one{
//     background-color: $myColor;
// }
// h1{
//     //&==父级 在当前位置就代表div
//     &:hover{
//         background-color: white;
//     }
//    background-color: $mybg;
// }
.father ::v-deep .mysass{
    background-color: yellow;
}


</style>